<template>
	<view class="rePair_detail">
		<!-- #ifdef MP-WEIXIN -->
		<view class="nav" :style="{ background: showBg ? '#fff' : '' }">
			<global-nav-bar type="black" left-icon="back" color="#333" :title="navBarTitle" :fixed="false"
				backgroundColor="rgba(0, 0, 0, 0)"></global-nav-bar>
		</view>
		<!-- #endif -->
		<view>
			<image class="bg"
				src="https://592800-erised-fresh.oss-cn-shenzhen.aliyuncs.com/upload/20221012/c1a6e9996af7e11408d283b788eb2b33.png"
				mode="" v-if="!showBg"></image>
		</view>
		<!-- 头部进度条 -->
		<view class="header">
			<elevtor-card :msg="{
				...elevatorDetail,
				elevatorId: this.elevatorId,
				isFull: this.isFull,
				isHistory: isFromHistory,
			}">
			</elevtor-card>
		</view>
		<view class="addressBox" @click="toProjectDetail">
			<view class="top">
				<view class="name">
					<image src="@/static/images/index/buildIcon.svg" mode=""></image>
					<view>{{ elevatorDetail.buildingName || "" }} </view>
				</view>
			</view>
			<view class="buildAddress">{{
				elevatorDetail.buildingAddress || ""
			}}</view>
		</view>
		<view class="content_box" @click="showMorBtns = false" :style="{ zIndex: showBg ? '100' : '105' }">
			<!-- 中间部分 -->
			<!-- 电梯信息 -->
			<view class="progressBar">
				<view class="progressBar_content">
					<view class="">
						<view class="progressBar_item"> 救援进度 </view>
						<stautsStep :actIndex="[-1, 0, 1, 1, 2, 3, 3, 3][status]" :list="options" :log="logs">
						</stautsStep>
					</view>
					<view class="userBox" @click="goTaskSetpPage"><user-list lable="执行人员"
							:list="rescueOrderDetail.planContentUsers"></user-list></view>
					<view class="mapMain">
						<map id="map" class="mapBox" v-if="markers.length" :latitude="markers[0].latitude"
							:longitude="markers[0].longitude" :scale="scale" :markers="markers" @tap="toPosition"
							@markertap="markertap">
							<cover-view slot="callout">
								<block v-for="(item, index) in customCalloutMarkers" :key="index">
									<cover-view class="customCallout" :marker-id="item.userId">
										<cover-view class="content_left">
											<cover-image :src="item.avatar
												? item.avatar
												: '/static/images/map/avatar.png'
												"></cover-image>
										</cover-view>
										<cover-view class="content_right">
											<cover-view class="content_right_main">
												<cover-view class="realName">{{
													item.realName
												}}</cover-view>
												<cover-view>({{
													item.deptName.length > 5
														? item.deptName.slice(0, 5) + "..."
														: item.deptName
												}})</cover-view>
											</cover-view>
											<cover-view class="phone">{{ item.phone }}</cover-view>
											<cover-view class="position" v-if="!item.isArrived">距离救援项目:
												<cover-view class="way">{{
													item.distance > 1000
														? (item.distance / 1000).toFixed(1) + "公里"
														: item.distance + "米"
												}}</cover-view>
											</cover-view>
											<cover-view class="arried" v-else>
												<cover-image src="/static/images/index/6.png"></cover-image>
												<cover-view>已到达</cover-view>
											</cover-view>
											<cover-view class="time">{{
												item.createTime
											}}</cover-view>
										</cover-view>
									</cover-view>
								</block>
							</cover-view>
						</map>
					</view>
				</view>
			</view>
			<view class="content_item">
				<!-- <button @click="handleStart">测试112555</button> -->
				<view class="title">报警信息</view>
				<view class="falutItem">
					<view class="label">报警人:</view>
					<view v-if="rescueOrderDetail.rescueMessageVO.trapType == 1">
						-
					</view>
					<view v-else>{{ rescueOrderDetail.rescueMessageVO.name || '一键救援系统' }}</view>
				</view>
				<view class="falutItem">
					<view class="label">联系电话:</view>
					<view v-if="rescueOrderDetail.rescueMessageVO.trapType == 1">
						-
					</view>
					<view :class="rescueOrderDetail.rescueMessageVO.phone ? 'callPhone' : ''" @click.stop="
						dial({ phones: rescueOrderDetail.rescueMessageVO.phone })
						" v-else>
						<image src="@/static/images/callPhone.png" v-if="rescueOrderDetail.rescueMessageVO.phone">
						</image>
						<text>{{ rescueOrderDetail.rescueMessageVO.phone || '-' }}</text>
					</view>
				</view>
				<view class="falutItem" v-if="rescueOrderDetail.rescueMessageVO.floor">
					<view class="label">所在楼层:</view>
					<view>{{ rescueOrderDetail.rescueMessageVO.floor }}</view>
				</view>
				<view class="falutItem">
					<view class="label">报警类型:</view>
					<view>{{ rescueOrderDetail.rescueMessageVO.trapTypeDesc }}</view>
				</view>
				<view class="falutItem">
					<view class="label">报警来源:</view>
					<view>{{ rescueOrderDetail.rescueMessageVO.trapFormValue }}</view>
				</view>
				<view class="falutItem" v-if="rescueOrderDetail.rescueMessageVO.trapDesc">
					<view class="label">报警备注:</view>
					<view class="trapDesc">{{
						rescueOrderDetail.rescueMessageVO.trapDesc
					}}</view>
				</view>
				<view class="falutItem">
					<view class="label">报警时间:</view>
					<view>{{ rescueOrderDetail.rescueMessageVO.createTime }}</view>
				</view>
			</view>
			<!-- 物业信息 -->
			<view class="content_item">
				<view class="title">物业信息</view>
				<view class="falutItem">
					<view class="label">使用单位:</view>
					<view>{{ rescueOrderDetail.estateInfoVO.estateName || "--" }}</view>
				</view>
				<view class="falutItem">
					<view class="label">项目联系人:</view>
					<view class="callPhone" @click.stop="
						dial({ phones: rescueOrderDetail.estateInfoVO.contactsUserPhone })
						">
						<text>
							{{
								rescueOrderDetail.estateInfoVO.contactsUser == "暂无"
									? "--"
									: rescueOrderDetail.estateInfoVO.contactsUser
							}}
						</text>
						<image src="@/static/images/callPhone.png" mode="" v-if="
							rescueOrderDetail.estateInfoVO.contactsUserPhone &&
							rescueOrderDetail.estateInfoVO.contactsUserPhone != '暂无' &&
							rescueOrderDetail.estateInfoVO.contactsUserPhone != 1
						">
						</image>
						<text v-if="
							rescueOrderDetail.estateInfoVO.contactsUserPhone &&
							rescueOrderDetail.estateInfoVO.contactsUserPhone != '暂无' &&
							rescueOrderDetail.estateInfoVO.contactsUserPhone != 1
						">
							{{ rescueOrderDetail.estateInfoVO.contactsUserPhone }}
						</text>
					</view>
				</view>
			</view>
			<!-- 最近一次维修保养 -->
			<view class="content_item" v-if="rescueOrderDetail.lastPlan">
				<last-record :msg="{ ...rescueOrderDetail.lastPlan, ...elevatorDetail }"></last-record>
			</view>
			<!-- 救援记录 -->
			<view class="content_item" v-if="status >= 4 && isSign">
				<view class="title">救援记录</view>
				<rescue-record :buildingName="elevatorDetail.buildingName" :address="rescueOrderDetail.address"
					v-if="status == 4 && userRole" :rescueMode="rescueMode" :rescueSelectList="rescueSelectList"
					@openSelect="openSelect" :elevatorAddress="formData.elevatorAddress" :showPopups="showPopups"
					@getFormData="getFormData"></rescue-record>
				<view v-else-if="status == 5">
					<view class="faultReasonContent">
						<view class="title">困人原因</view>
						<view class="faultReasonItem">
							<view class="label">困人原因:</view>
							<view class="falutLabel">
								<view v-for="item in rescueOrderDetail.rescueModeVO.rescueModeList" :key="item">
									{{ item }}</view>
							</view>
						</view>
						<view class="faultReasonItem" v-if="rescueOrderDetail.rescueModeVO.rescueModeRemark">
							<view class="label">其他方式:</view>
							<view class="falutDesc">
								{{ rescueOrderDetail.rescueModeVO.rescueModeRemark }}
							</view>
						</view>
						<view class="faultReasonItem" v-if="rescueOrderDetail.rescueModeVO.rescueModeDesc">
							<view class="label">备注说明:</view>
							<view class="falutDesc">{{
								rescueOrderDetail.rescueModeVO.rescueModeDesc
							}}</view>
						</view>
						<view class="faultReasonItem">
							<view class="label">救援人员:</view>
							<view class="callPhone">
								<text>{{ rescueOrderDetail.rescueModeVO.rescueUserName }}</text>
							</view>
						</view>
						<view class="faultReasonItem">
							<view class="label">记录时间:</view>
							<view class="falutDesc">{{
								rescueOrderDetail.rescueModeVO.updateTime.replaceAll("-", "/")
							}}
							</view>
						</view>
						<view class="imgList">
							<view v-for="(it, idx) in rescueOrderDetail.rescueModeVO.imgUrl" :key="idx">
								<image @click="
									preViewFile(rescueOrderDetail.rescueModeVO.imgUrl, idx)
									" :src="it.type == 'image' ? it.url : '/static/images/video.png'
										" :lazy-load="true" mode="aspectFill"></image>
							</view>
						</view>
					</view>
				</view>
				<view class="empty flex" v-else>未发现救援记录</view>
			</view>
			<!-- 关联任务 -->
			<view class="infocard" v-if="rescueOrderDetail.relevanceMalfunctionPlanVO.length">
				<view class="title"> 关联任务 </view>
				<view v-for="(
item, index
          ) in rescueOrderDetail.relevanceMalfunctionPlanVO.slice(0, 1)" :key="index" @click="toRepairDetail(item)"
					:class="[index == rescueOrderDetail.relevanceMalfunctionPlanVO.length - 1
						? '' : 'border_item', 'padding']">
					<view class="ele-name">
						{{ item.buildingName || "" }}-{{ item.elevatorAddress || "" }}
						<text class="deep">维修</text>
						<image src="@/static/images/repairFitting/right.png"></image>
					</view>
					<view class="main_card_item">
						<view class="label">紧急程度</view>
						<view class="desc">

							<text class="tag" v-for="(it, i) in btnBoxList" :key="i"
								:style="{ color: it.color, borderColor: it.color }"
								v-show="item.emerProcType == it.key">
								{{ it.label }}
							</text>

						</view>
					</view>
					<view class="main_card_item">
						<view class="label">报障状态</view>
						<view class="desc">
							<view :class="['tag', item.elevatorStop == 1 ? 'normal' : 'stop']">{{ item.elevatorStop == 1
								? "正常运行" :
								"停梯" }}</view>
						</view>
					</view>
				</view>
			</view>
			<!-- 检修记录 -->
			<view class="repair_box" v-if="status == 5 && malFunctionHistories.length">
				<view class="content_item">
					<view class="title">检修记录</view>
					<rescue-repair v-for="(item, index) in malFunctionHistories" :key="item.id"
						:isPlanStatus="isPlanStatus" :msg="item" :rescue="true"
						:updateStatus="rescueOrderDetail.updateStatus"
						:isLast="index === malFunctionHistories.length - 1 ? true : false" :index="index"
						:order-status="status" :editing="isEditFlag" :planId="planId" @changeEditStatus="editingRecord"
						@update="updateRecord" @hadDone="handleDone"></rescue-repair>
				</view>
			</view>
			<!-- 停梯原因 -->
			<view class="content_item" v-if="status == 5">
				<view class="faultReasonContent">
					<view class="title">停梯原因</view>
					<view class="faultReasonItem">
						<view class="label">停梯原因:</view>
						<view class="falutLabel">
							<view v-for="item in rescueOrderDetail.rescueStopReasonVO
								.recueStopReasonList" :key="item">
								{{ item }}</view>
						</view>
					</view>
					<view class="faultReasonItem" v-if="rescueOrderDetail.rescueStopReasonVO.stopReasonRemark">
						<view class="label">其他原因:</view>
						<view class="falutDesc">{{
							rescueOrderDetail.rescueStopReasonVO.stopReasonRemark
						}}</view>
					</view>
					<view class="faultReasonItem" v-if="rescueOrderDetail.rescueStopReasonVO.stopReasonDesc">
						<view class="label">停梯说明:</view>
						<view class="falutDesc">{{
							rescueOrderDetail.rescueStopReasonVO.stopReasonDesc
						}}</view>
					</view>
				</view>
			</view>
		</view>
		<!-- 底部部分 -->
		<view class="bottom" @click="showMorBtns = false">
			<view :class="['left', status < 5 ? 'more' : '']">
				<view class="left_item" @click="handleCall(rescueOrderDetail.estateInfoVO.contactsUserPhone)">
					<image src="/static/images/phone.png" mode=""></image>
					<view>物业</view>
				</view>
				<view class="left_item" @click="handleCall('0760-88814888')">
					<image src="/static/images/customer.png" mode=""></image>
					<view>客服</view>
				</view>

				<view class="left_item" v-if="status < 5" @click.stop="showMorBtns = !showMorBtns">
					<image src="/static/images/ic_more.png" mode=""></image>
					<view>更多</view>
				</view>
			</view>
			<view :class="['right', 'flex']">

				<view class="repariing flex" v-if="status >= 5">
					<view v-if="rescueOrderDetail.updateStatus && userRole" class="add addRed" @click="addRecord">添加检修记录
					</view>
					<view :class="[
						'add',
						(rescueOrderDetail.relevanceMalfunctionPlanVO &&
							rescueOrderDetail.relevanceMalfunctionPlanVO.length >= 1) || disabledRepairBtn
							? 'finish'
							: '',
					]" @click="toAddPart" v-if="rescueOrderDetail.updateStatus && userRole">上报维修</view>
					<view>
						<view class="finish">{{ status == 6 ? '已撤销' : '已救援' }}</view>
					</view>
				</view>
				<view class="repariing flex" v-else>
					<view class="add videocall" @click="toVideoCall" v-if="(status <= 4) && elevatorDetail.deviceId">
						<image src="@/static/images/videocall.png"></image> 视频通话
					</view>
					<view class="add addRed" @click="rescueArrive" v-if="status == 3 || (status == 4 && !isSign)">已到达
					</view>
					<view class="add addRed" @click="rescueSubmit" v-else-if="status != 1">救援完成</view>
					<!-- <view class="flex finish" v-if="status == 1">任务待分配</view> -->
					<view class="add addRed" @click="toAddMember" v-if="status == 1">调度人员</view>
				</view>

			</view>
		</view>

		<view class="more-btns" v-if="showMorBtns">
			<view class="more-btns-item"
				v-if="![5, 6].includes(status) && rescueOrderDetail.rescueModeVO.arrivalWarning != null && rescueOrderDetail.rescueModeVO.arrivalWarning > 0"
				@click.stop="urgeFuc">催办</view>
			<view class="more-btns-item" @click.stop="cancelOrder">撤销救援</view>
			<view class="more-btns-item" @click.stop="toAddMember" v-if="status != 1">增派人员</view>
			<!-- <view class="more-btns-item" @click.stop="">确认已到达</view> -->
		</view>
		<!-- 签到 -->
		<uni-popup ref="popupSign">
			<timeSignin :type="signType" :signinData="elevatorDetail" parentStyle="0" :lists="signImg"
				@close="signintime" @changeImg="changeImg" />
		</uni-popup>
		<!-- 添加记录 -->
		<uni-popup ref="popup" :mask-click="true" type="bottom" @close="closeRecord" @updata="updataShowFuc">
			<add-record v-if="showPoupup" :elevatorId="elevatorId" @addRecord="handleSubmit" :plan-id="planId"
				@update="handleSubmit" :restFlag="aa" @hadDone="handleDone"></add-record>
		</uni-popup>
		<!-- 救援完成,停梯原因 -->
		<uni-popup ref="finish" :mask-click="true" type="center">
			<rescue-model @cancle="handleReasonClose" :list="reasonList" @comfire="handleReasonComfire"
				ref="rescue"></rescue-model>
		</uni-popup>
		<!-- 弹窗提示 -->
		<model title="完成提示" comfireTxt="查看配件更换" :maskClick="false" @cancle="visibleShow = false" @comfire="comfire"
			:visible="visibleShow">
			<view class="comfirBox">
				<view>当前维修任务下，还有未完成的配件更换，无法结束任务</view>
				<view class="tips">注:请点击查看配件更换-查看当前维修任务下的配件更换任务</view>
			</view>
		</model>
		<!-- 项目别名弹窗 -->
		<aliasPopup :showAlias="popupShow" :aliasArr="aliasArr" @closedMask="closedMask"></aliasPopup>
		<!-- 电梯位置下拉框 -->
		<view class="popupWrapper" @click.stop="close()" :style="showPopups ? 'display: flex;' : 'display: none;'">
			<view class="calendarEdit">
				<view class="edit_bor" @click="close()">
					<view class="down-btn"></view>
				</view>

				<view class="edit_content">
					<view class="executive_tit">选择电梯位置</view>
					<scroll-view scroll-y="true">
						<view class="executive" v-if="rescueSelectList && rescueSelectList.length">
							<view v-for="(item, index) in rescueSelectList" :key="index"
								@click.stop="chooseAddress(item, index)" :class="[
									index === rescueSelectList.length - 1 ? 'last' : '',
									'executive_user',
								]">
								<view :style="{
									color:
										selectAdd === index || formData.elevatorId == item.id
											? '#0091FF'
											: '',
								}">
									{{ item.elevatorName }}
								</view>
							</view>
						</view>
					</scroll-view>
				</view>

				<view class="sure_box" @click.stop="sure">
					<view class="text" :style="{
						backgroundColor: formData.elevatorId ? '#0091ff' : '',
						color: formData.elevatorId ? '#fff' : '',
					}">确定</view>
				</view>
			</view>
		</view>
		<previewMedia ref="previewMedia"></previewMedia>
	</view>
</template>

<script>
import RescueModel from './components/rescue-model.vue';
import stautsStep from '@/components/status-special/status-special.vue';
import ElevtorCard from './components/elevtor-card.vue';
import LastRecord from '@/components/last-record/last-record.vue';
import rescueRepair from './components/rescue-repair.vue';
import RescueRecord from './components/rescue-record.vue';
import AddRecord from './components/add-record.vue';
import timeSignin from '@/components/timeSignin/timeSignin.vue';
import UserList from '@/components/user-list/user-list.vue';
import model from '@/components/model/index.vue';
import GlobalNavBar from '@/components/uni-nav-bar/global-nav-bar';
import { signIn, signOut, finishPlan } from '@/apis/workOrder.js';
import { getSelectWorkTracks } from '@/apis/taskStepPage.js';
import { getEleInfo } from '@/apis/elevator.js';
import { mapState, mapActions } from 'vuex';
import {
	elevtorDetail,
	rescueDetail,
	dictionaryTree,
	selectList,
	rescueFinish,
	rescueArrive,
	rescueDetailMap,
	getRescueRepairOrder,
} from '@/apis/elevator.js';
import { resuceCancel,resuceReminder } from '@/apis/rescue.js';
// 经纬度距离计算
import { getDistance, getScale } from '@/utils/tools.js';
import { getlocalinfo } from '@/utils/utils.js';
import aliasPopup from '@/components/card-dial/aliasPopup.vue';
export default {
	components: {
		GlobalNavBar,
		model,
		stautsStep,
		ElevtorCard,
		LastRecord,
		RescueRecord,
		AddRecord,
		timeSignin,
		RescueModel,
		UserList,
		rescueRepair,
		aliasPopup,
	},
	data() {
		return {
			showMorBtns: false,
			userRole: false,
			latitude: '',
			longitude: '',
			markers: [],
			customCalloutMarkers: [],
			// 顶部导航栏title
			navBarTitle: '',
			// 有配件更换未完成弹窗
			visibleShow: false,
			workOrderDetail: {
				// 故障信息
				faultMessageVO: {},
				// 报障信息
				faultReportVO: {},
				// 故障原因
				faultReasonVO: {},
				// 维修详情最后一次任务
				lastPlan: {},
				planContentUsers: [],
			},
			signType: 'in',
			elevatorId: '',
			// 任务状态详情
			planDetail: {},
			// 我自己是否还未签退
			isPlanStatus: false,
			showPoupup: false,
			options: [
				{
					status: 1,
					name: '调度中',
					icon: '/static/images/step1.png',
					createTime: '',
				},
				{
					status: 3,
					name: '已出发',
					icon: '/static/images/step2.png',
					createTime: '',
				},
				{
					status: 4,
					name: '已到达',
					icon: '/static/images/step5.png',
					createTime: '',
				},
				{
					status: 5,
					name: '已救援',
					icon: '/static/images/step3.png',
					createTime: '',
				},
			],
			signinData: {},
			// 签到图片
			signImg: [],
			status: '',
			elevatorDetail: {},
			elevatorStop: '',
			imgUrl: [],
			malFunctionHistories: [],
			planId: '',
			lastPlan: {},
			isEditFlag: false,
			showBg: false,
			imgaddress: '',
			stepList: [],
			isFull: false,
			logs: [],

			faultReasonVO: {},
			// 是否在历史详情页面跳转过来,否type=1 是type=2
			isFromHistory: '1',
			problemOtherDesc: '',

			visibleShowTwo: false,
			elevatorStatus: 1,
			// 维修完成提示故障原因状态弹窗
			isOUtInState: false,
			// 有同伴任务数据
			cantUsersArr: [],
			// 确定电梯状态后是否走签退逻辑
			showLeave: false,
			// 签退后是否走维修完成逻辑
			handFinish: false,
			// 标识选中电梯位置
			selectAdd: '',
			// 电梯位置下拉框 弹出层
			showPopups: false,
			// 救援记录 救援方式选项数据
			rescueMode: [],
			// 救援记录 电梯位置
			rescueSelectList: [],
			// 停梯原因
			reasonList: [],
			// 救援记录 展示图片
			disposeImgUrl: [],
			// 救援
			rescueOrderDetail: {
				// 救援工单 电梯名
				address: '',
				// 项目id
				buildingId: '',
				// 物业信息
				estateInfoVO: {},
				// 报警信息
				rescueMessageVO: {},
				// 救援方式
				rescueModeVO: {},
				// 关联任务
				relevanceMalfunctionPlanVO: [],
				// 停梯原因
				rescueStopReasonVO: {},
				// 维修详情最后一次任务
				lastPlan: {},
			},
			// 救援完成提交数据
			formData: {},
			// 定时刷新map定位信息 10s
			interVar: null,
			// 区分map组件的tap和marker事件
			isClickMarker: false,
			// 动态scale
			scale: 12,
			// 是否已到达
			isSign: false,
			showMore: false,
			// 紧急程度标签
			btnBoxList: [
				{ color: '#0091FF', bgColor: '#dcf0ff', label: '较低', key: '4' },
				{ color: '#F7B500', bgColor: '#fff7e1', label: '普通', key: '3' },
				{ color: '#fa6400', bgColor: '#ffecdf', label: '紧急', key: '2' },
				{ color: '#e02020', bgColor: '#ffecec', label: '非常紧急', key: '1' },
			],
			popupShow: false,
			overflowShow: false,
			aliasArr: [],
			disabledRepairBtn: false,// 是否禁用上报维修按钮
		};
	},
	computed: {
		...mapState('user', ['userinfo']),
		showBtns() {
			let next = false;
			if (!this.planDetail.users) {
				return next;
			}
			for (let i = 0; i < this.planDetail.users.length; i++) {
				if (this.planDetail.users[i].userId == this.userinfo.user_id) {
					next = true;
					break;
				}
			}
			return next;
		},
		finishBtn() {
			return this.malFunctionHistories.length ? false : true;
		},
	},
	async onLoad(e) {
		this.navBarTitle = '救援详情';
		console.log(e, 'e的值');
		this.planId = e.planId;
		if (e.elevatorId) {
			this.elevatorId = e.elevatorId;
		}
		if (e.type) {
			this.isFromHistory = e.type;
		}

		// 获取字典树
		dictionaryTree({ code: 'rescue' }).then((res) => {
			this.rescueMode = res.data[1].children;
			this.reasonList = res.data[2].children;
		});
	},
	async onShow() {
		await this.handleRreshToken();
		if (!this.userinfo.user_id) {
			uni.showModal({
				title: '提示',
				content: '检测到您未登录或登录已失效，请前往登录后在操作',
				showCancel: false,
				success: () => {
					uni.navigateTo({
						url: '../login/index',
					});
				},
			});
			return;
		}
		this.rescueDetailMap();
		try {
			clearInterval(this.interVar);
		} catch (error) {
			console.log(error);
		}
		this.interVar = setInterval(() => {
			this.rescueDetailMap();
		}, 10000);
		await this.initData();
		this.getRescueRepairOrder();
		// 获取电梯补充下拉框数据
		selectList({ buildingId: this.rescueOrderDetail.buildingId }).then(
			(res) => {
				this.rescueSelectList = res.data;
			}
		);
	},
	onUnload() {
		clearInterval(this.interVar);
		this.interVar = null;
	},
	watch: {},
	onPageScroll(e) {
		// console.log(e.scrollTop, '滚动')
		if (e.scrollTop > 20) {
			this.navBarTitle = this.elevatorDetail.elevatorAddress;
			this.showBg = true;
		} else {
			this.navBarTitle = '救援详情';
			this.showBg = false;
		}
	},
	methods: {
		...mapActions('user', ['handleRreshToken']),
		// 催办
		urgeFuc() {
			resuceReminder({
				planId: this.planId
			}).then(() => {
				uni.showToast({
					title: '催办成功'
				});
				this.showMorBtns = false;
			});
		},
		cancelOrder() {
			this.showMorBtns = false;
			uni.showModal({
				title: '提示',
				content: '是否确定撤销救援？',
				success: res => {
					if (res.confirm) {
						uni.showLoading({
							title: '撤销中'
						});
						resuceCancel({
							planId: this.planId,
							elevatorId: this.elevatorId
						}).then(() => {
							uni.hideLoading();
							uni.showToast({
								title: '撤销成功'
							});
							this.initData();
						})
							.catch(() => {
								uni.hideLoading();
							});
					}
				}
			});
		},

		toAddMember() {
			this.showMorBtns = false;
			if (!this.rescueOrderDetail.buildingId) {
				uni.showToast({ title: '缺少项目id', icon: 'none' });
				return;
			}
			uni.navigateTo({
				url: '/subpages/rescue/memberSelect?planId=' + this.planId
					+ '&buildingId=' + this.rescueOrderDetail.buildingId
					+ '&elevatorId=' + (this.rescueOrderDetail.elevatorId || '')
					+ '&buildingName=' + this.rescueOrderDetail.buildingName
					+ '&address=' + (this.rescueOrderDetail.address || '未知位置')
			});
		},
		// 验证是否有权限操作
		findUserRole() {
			let list = this.rescueOrderDetail.planContentUsers;
			let role = false;
			for (let i = 0; i < list.length; i++) {
				if (list[i].userId == this.userinfo.user_id) {
					role = true;
					break;
				}
			}
			// if (!role) {

			// }
			this.userRole = role;
			return role;
		},
		markertap(e) {
			// #ifdef H5
			console.log(e);
			return;
			// #endif
			// this.isClickMarker = true;
			// let data = this.markers.filter(item => item.id == e.markerId);
			// if (data[0].isArrived) {
			// 	this.markers.forEach(item => {
			// 		if (item.isArrived) {
			// 			if (item.customCallout.display == 'ALWAYS') {
			// 				item.customCallout.display = 'NONE';
			// 			} else {
			// 				item.customCallout.display = 'ALWAYS';
			// 			}
			// 		}
			// 	});
			// } else {
			// 	this.markers.forEach(item => {
			// 		if (item.id == e.markerId && item.customCallout) {
			// 			if (item.customCallout.display == 'ALWAYS') {
			// 				item.customCallout.display = 'NONE';
			// 			} else {
			// 				item.customCallout.display = 'ALWAYS';
			// 			}
			// 		}
			// 	});
			// }
		},
		toPosition() {
			if (this.isClickMarker) {
				this.isClickMarker = false;
			} else {
				uni.navigateTo({
					url:
						'/subpages/rescue/rescuePosition?planId=' +
						this.planId +
						'&elevatorId=' +
						this.elevatorId +
						'&type=' +
						this.isFromHistory,
				});
			}
		},
		// 获取map信息
		rescueDetailMap() {
			let latitude = '';
			let longitude = '';
			uni.getLocation({
				type: 'gcj02',
				success: function (res) {
					latitude = res.latitude;
					longitude = res.longitude;
				},
			});
			setTimeout(() => {
				rescueDetailMap({
					planId: this.planId,
				}).then((res) => {
					let count = 1;
					let list = res.data;
					let platform = uni.getSystemInfoSync().platform;
					list.forEach((item) => {
						item.width = 40;
						item.height = 46;
						item.iconPath = '/static/images/map/position.png';
						item.customCallout = {
							anchorY: 86,
							anchorX: 115,
							display: 'ALWAYS',
						};
						if (this.userinfo.user_id == item.userId && !item.isArrived) {
							item.latitude = latitude;
							item.longitude = longitude;
						}
						item.id = Number(item.userId);
						item.distance = Math.round(
							getDistance(
								item.latitude,
								item.longitude,
								this.elevatorDetail.latitude,
								this.elevatorDetail.longitude
							)
						);
						if (item.isArrived) {
							if (count > 1) {
								item.width = 1;
								item.height = 1;
								if (count == 2) {
									item.customCallout.anchorY += 40;
								} else {
									item.customCallout.anchorY += count * 42;
								}
							}
							item.latitude =
								this.elevatorDetail.latitude -
								count * (platform == 'ios' ? 0.00004 : 0.000008);
							item.longitude =
								Number(this.elevatorDetail.longitude) +
								(platform == 'ios' ? 0.00003 : 0.00001);
							item.distance = 100;
							count += 1;
						}
					});
					if (res.data.some((item) => item.latitude)) {
						let minMathData = Math.min.apply(
							Math,
							res.data.map((item) => item.distance)
						);
						this.scale = getScale(minMathData);
					}
					let newMakers = [];
					for (let i = 0; i < list.length; i++) {
						if (list[i].latitude) {
							let item = list[i];
							list[i].latitude = list[i].latitude * 1;
							list[i].longitude = list[i].longitude * 1;
							// #ifdef H5
							list[i].label = {
								x: 8,
								y: -42,
								anchorX: 8,
								anchorY: -42,
								content: `<div style="line-height:16px;font-size:12px;color:#333;display: flex;background:#fff;border-radius: 2rpx;padding: 6px 8px;">
									<div style="padding-right:6px"><img style="border-radius: 50%;width: 32px;height: 32px;" src="${item.avatar ? item.avatar : '/static/images/map/avatar.png'
									}"></div>
									<div >
										<div style="display: flex;color: #333;">
											<div style="font-weight: bold;">${item.realName}</div>
											<div >(${item.deptName.length > 5
										? item.deptName.slice(0, 5) + '...'
										: item.deptName
									})</div>
										</div>
										<div style="color: #666;">${item.phone}</div>
										<div style="color:#E02020;display: ${!item.isArrived ? 'flex' : 'none'
									};">距离救援项目:<div style="font-weight: bold;">${item.distance > 1000
										? (item.distance / 1000).toFixed(1) + '公里'
										: item.distance + '米'
									}</div></div>
									    <div style="color:#FA6400;display: ${item.isArrived ? 'flex' : 'none'
									};align-items: center;">
										<img  style="width: 16px;height: 16px;" src="/static/images/index/6.png">已到达
									    </div>
										<div style="color: #999;">${item.createTime}</div>
									</div>
									</div>`,
							};
							// #endif
							newMakers.push(list[i]);
						}
					}
					// this.markers.splice(1)
					if (newMakers.length) {
						if (this.markers.length) {
							this.markers = [this.markers[0], ...newMakers];
						} else {
							this.markers = [...newMakers];
						}
					}
					this.customCalloutMarkers = newMakers;
				});
			}, 1000);
		},
		// 视频通话
		toVideoCall() {
			uni.showLoading({
				title: '加载中',
				mask: true,
			});
			getEleInfo({ id: this.elevatorDetail.id }).then((res) => {
				if (res.data.freeTimeLeft <= 0) {
					uni.hideLoading();
					uni.showModal({
						title: '温馨提示',
						content: '当月视频通话可用时效已不足已暂停视频通话服务',
						showCancel: false,
						confirmText: '我知道了',
					});

					return;
				}
				if (res.data.enable == false) {
					uni.hideLoading();
					uni.showModal({
						title: '温馨提示',
						content: '当前设备视频通话功能已关闭',
						showCancel: false,
						confirmText: '我知道了',
					});
					return;
				}
				let users = res.data.roomUsers || [];
				let usercount = [];
				for (let i = 0; i < users.length; i++) {
					if (users[i].deviceType == 'maintenance') {
						usercount.push(users[i].userName);
					}
				}
				if (usercount.length >= 2) {
					uni.hideLoading();
					uni.showModal({
						title: '视频通话占线中',
						content: usercount.join('、'),
						showCancel: false,
						confirmText: '我知道了',
					});
					return;
				}

				uni.setStorage({
					key: 'videoCall',
					data: {
						deviceId: this.elevatorDetail.deviceId,
						elevatorId: this.elevatorDetail.id,
						buildingName: this.elevatorDetail.buildingName,
						elevatorAddress: this.elevatorDetail.elevatorAddress,
						projectName: this.elevatorDetail.buildingName,
						serviceName: this.elevatorDetail.elevatorAddress,
					},
					success: () => {
						uni.navigateTo({
							url: '/pages/live/live',
						});
					},
				});
				uni.hideLoading();
			});
		},
		// 已到达
		async rescueArrive() {
			if (!this.findUserRole()) {
				uni.showModal({
					title: '提示',
					content: '您暂无权限操作该救援工单',
					showCancel: false,
				});
				return;
			}
			uni.showLoading({
				title: '提交中',
				mask: true,
			});

			let localInfo = await this.getLocalInfo();
			if (!localInfo.latitude) {
				uni.hideLoading();
				uni.showModal({
					title: '提示',
					content: '请打开定位，再签到',
					showCancel: false,
				});
				return;
			}
			// 计算是否范围内打卡
			let distance = getDistance(
				localInfo.latitude,
				localInfo.longitude,
				this.elevatorDetail.latitude,
				this.elevatorDetail.longitude
			);
			let address = {};
			try {
				address = await getlocalinfo(localInfo.latitude, localInfo.longitude);
				console.log('address', address);
			} catch (error) {
				console.log('error', error);
			}

			let signStatus = 1;
			if (!localInfo.latitude) {
				this.locationError = '无定位';
			}
			if (distance > this.$config.maxDistance) {
				signStatus = 2;
				this.locationError = '偏离项目定位';
			} else {
				this.locationError = '正常';
			}

			rescueArrive({
				signStatus,
				locationAddress: address.result.address,
				latitude: localInfo.latitude,
				longitude: localInfo.longitude,
				planId: this.planId,
				userId: this.userinfo.user_id,
			}).then(() => {
				uni.hideLoading();
				this.initData();
				clearInterval(this.interVar);
				this.rescueDetailMap();
			});
		},
		// 拨号
		dial(item) {
			if (!item.phones || item.phones == 1 || item.phones == '暂无') {
				return;
			}
			uni.showModal({
				title: '拨打电话',
				content: item.phones,
				success: (res) => {
					if (res.confirm) {
						uni.makePhoneCall({
							phoneNumber: item.phones,
						});
					}
				},
			});
		},
		// 电梯位置弹出框
		openSelect() {
			this.showPopups = true;
		},
		close() {
			this.showPopups = false;
			this.selectAdd = '';
			this.formData.elevatorId = '';
			this.formData.elevatorAddress = '';
		},
		chooseAddress(item, index) {
			this.selectAdd = index;
			this.formData.elevatorId = item.id;
			this.formData.elevatorAddress = item.elevatorName;
		},
		sure() {
			if (!this.formData.elevatorId) return;
			this.showPopups = false;
		},
		// 预览
		preViewFile(list, index) {
			console.log('预览照片', list, index);
			this.$previewMedia({
				sources: list,
				current: index,
			});
		},
		// 救援完成提交验证
		rescueSubmit() {
			if (!this.findUserRole()) {
				uni.showModal({
					title: '提示',
					content: '您暂无权限操作该救援工单',
					showCancel: false,
				});
				return;
			}
			let str;
			if (!this.formData.elevatorAddress) {
				str = '请选择补充电梯位置';
				uni.showToast({
					title: str,
					icon: 'none',
				});
				return false;
			}
			if (!this.formData.recueModeValue) {
				str = '请选择救援方式';
				uni.showToast({
					title: str,
					icon: 'none',
				});
				return false;
			}
			if (this.formData.recueModeValue.includes('其他')) {
				if (!this.formData.recueModeRemark) {
					str = '请填写其他救援方式';
					uni.showToast({
						title: str,
						icon: 'none',
					});
					return false;
				}
			}
			this.$refs.finish.open();
		},
		// 获取救援记录数据
		getFormData(data) {
			const params = {
				recueMode: data.recueMode.join(','),
				recueModeValue: data.recueModeValue.join(','),
				recueModeRemark: data.recueModeRemark,
				recueModeDesc: data.recueModeDesc,
				imgUrl: data.imgUrl || [],
			};
			this.formData = {
				...this.formData,
				...params,
			};
		},
		// 查看维修详情
		toRepairDetail(item) {
			if (item.status == 1 || item.status == 5 || item.status == 6) {
				let rescueShow = {};
				if (this.userinfo.user_id == item.createUser) {
					rescueShow.myApply = 1;
					rescueShow.myRescue = 1;
				} else {
					rescueShow.myApply = 0;
					rescueShow.myRescue = 0;
				}
				uni.navigateTo({
					url:
						'/subpages/approve/repairDetail?planId=' +
						item.planId +
						'&elevatorId=' +
						item.elevatorId +
						'&businessApproveId=' +
						item.approveId +
						'&myApply=' +
						rescueShow.myApply +
						'&myRescue=' +
						rescueShow.myRescue +
						'&isUpdata=false',
				});
			} else {
				uni.navigateTo({
					url: `/subpages/repair/repariDetail?planId=${item.planId}&elevatorId=${item.elevatorId}`,
				});
			}
		},
		// 上报维修
		toAddPart() {
			if (
				(this.rescueOrderDetail.relevanceMalfunctionPlanVO &&
					this.rescueOrderDetail.relevanceMalfunctionPlanVO.length >= 1) || this.disabledRepairBtn
			) {
				return;
			}
			uni.navigateTo({
				url: `/pageModules/barrierSearch/barrierPage?elevatorId=${this.elevatorId}&elevatorName=${this.elevatorDetail.elevatorAddress}&elevatorAddress=${this.elevatorDetail.buildingAddress}&planId=${this.planId}&trapFormValue=${this.rescueOrderDetail.rescueMessageVO.trapFormValue}&wokrType=1&formPage=rescue`,
			});
		},
		// 跳转项目详情
		toProjectDetail() {
			uni.navigateTo({
				url:
					'/pageModules/projectInfo/detail?id=' +
					this.rescueOrderDetail.buildingId,
			});
		},
		// 弹窗提示
		changeState() {
			if (this.status === 4) {
				uni.showToast({
					title: '任务已完成',
					icon: 'none',
				});
				return;
			}
			if (!this.isPlanStatus) {
				uni.showModal({
					title: '提示',
					content: '请先签到开始再进行操作',
					showCancel: false,
				});
				return;
			}

			this.visibleShowTwo = true;
		},
		cancleChange() {
			this.visibleShowTwo = false;
			this.elevatorStatus = this.elevatorDetail.isStop;
		},
		// 获取任务跟踪进度条
		getSelectWorkTracks() {
			if (this.status == 6) {
				this.options[3].name = '已撤销';
				this.options[3].status = 6;
			}
			return new Promise((resolve) => {
				getSelectWorkTracks({ planId: this.planId }).then((res) => {
					let workLogs = res.data.workLogs;
					let logs = [];
					for (let i = 0; i < this.options.length; i++) {
						let createTime = '';
						for (let j = 0; j < workLogs.length; j++) {
							if (workLogs[j].planStatus == this.options[i].status) {
								createTime = workLogs[j].createTime;
								break;
							}
						}
						logs.push({ createTime });
					}
					this.logs = logs;
					// this.$forceUpdate();
					resolve();
				});
			});
		},
		// 任务追踪页面
		goTaskSetpPage() {
			this.elevatorDetail.planId = this.planId;
			uni.navigateTo({
				url: `/pageModules/taskStepPage/taskStepPage?planId=${this.planId}&elevatorId=${this.elevatorId}&state=2&status=${this.rescueOrderDetail.status}`,
				fail: (err) => {
					console.log(err);
				},
			});
		},
		updataShowFuc(val) {
			this.showPoupup = val;
		},
		handleBack() {
			// console.log(11)
			uni.navigateBack({});
		},
		async initData() {
			uni.showLoading({
				title: '加载中',
				icon: 'none',
			});
			await this.getDetail();
			if (this.elevatorId != 0) {
				elevtorDetail({ elevatorId: this.elevatorId }).then((res) => {
					if (res) {
						this.elevatorDetail = res.data;
						this.elevatorStatus = res.data.isStop;
						this.isFull = res.data.isFull;
						uni.hideLoading();
					}
				});
			}
			this.getSelectWorkTracks();
			return;
		},
		// 获取救援详情
		getDetail() {
			uni.showLoading({
				title: '加载中',
				icon: 'none',
			});
			return new Promise((resolve) => {
				rescueDetail({ planId: this.planId }).then((res) => {
					if (res) {
						// map 救援目的地 经纬度
						const marker = {
							id: 9999999,
							latitude: res.data.latitude * 1,
							longitude: res.data.longitude * 1,
							width: 32,
							height: 32,
							iconPath: '/static/images/map/sign.png',
						};
						if (this.markers.length) {
							this.markers[0] = marker;
						} else {
							this.markers = [marker];
						}
						// 经度
						this.elevatorDetail.longitude = res.data.longitude;
						// 纬度
						this.elevatorDetail.latitude = res.data.latitude;
						// 项目id
						this.elevatorDetail.buildingId = res.data.buildingId;
						// 项目名称
						this.elevatorDetail.buildingName = res.data.buildingName;
						// 项目地址
						this.elevatorDetail.buildingAddress = res.data.buildingAddress;
						// 梯名
						this.elevatorDetail.elevatorAddress = res.data.address;
						this.rescueOrderDetail = res.data;
						this.status = res.data.status;
						this.isSign = res.data.isSign;
						if ((this.status == 4 && this.isSign) || this.status > 4) {
							clearInterval(this.interVar);
						}
						this.elevatorId = res.data.elevatorId;
						if (res.data.elevatorId != 0) {
							this.formData.elevatorId = res.data.elevatorId;
							this.formData.elevatorAddress = res.data.address;
						}
						this.malFunctionHistories = res.data.malFunctionHistories;
						if (this.rescueOrderDetail.rescueModeVO.imgUrl) {
							let arr = [];
							for (
								let i = 0;
								i < this.rescueOrderDetail.rescueModeVO.imgUrl.length;
								i++
							) {
								arr.push(this.rescueOrderDetail.rescueModeVO.imgUrl[i].url);
							}
							this.disposeImgUrl = arr;
						}
						this.findUserRole();
						uni.hideLoading();

						if (this.status == 6) {
							uni.showToast({
								title: '该救援任务已撤销',
								icon: 'none'
							});

							// uni.showModal({
							// 	title: '提示',
							// 	content: '救援任务已撤销',
							// 	showCancel: false,
							// 	success: () => {
							// 		uni.reLaunch({
							// 			url: '/pages/home/index',
							// 		});
							// 	},
							// });
						}
					}
					resolve();
				});
			});
		},
		// 签退前确定电梯状态
		showStatusChangeBeforeLeave() {
			this.showLeave = true;
			// 签到签退提示电梯状态弹窗
			this.visibleShowTwo = true;
		},
		// 签退 post==> 是否签退后立即执行提交操作
		async finishOut() {
			console.log(post, '签退');
			const post = this.handFinish ? true : false;
			this.showLeave = false;
			let localInfo = await this.getLocalInfo();
			if (!localInfo.latitude) {
				uni.showModal({
					title: '提示',
					content: '请打开定位，再签退',
					showCancel: false,
				});
				return;
			}
			// 计算是否范围内打卡
			let distance = getDistance(
				localInfo.latitude,
				localInfo.longitude,
				this.elevatorDetail.latitude,
				this.elevatorDetail.longitude
			);
			if (distance > this.$config.maxDistance) {
				uni.showModal({
					title: '提示',
					content: '当前不在项目位置,是否确定按照当前位置继续签退？',
					success: (res) => {
						if (res.confirm) {
							this.signType = 'out';
							this.signinData = { post: post || false };
							this.imgaddress = '';
							this.signImg = [];
							this.$refs.popupSign.open('center');
						}
					},
				});

				return;
			}
			this.signType = 'out';
			this.imgaddress = '';
			this.signImg = [];
			this.signinData = {
				post: post || false,
			};
			this.$refs.popupSign.open('center');
			return;
		},

		// 签到按钮
		async signintime(e) {
			if (e != 1) {
				console.log('关闭');
				uni.hideLoading();
				this.imgaddress = '';
				this.signImg = [];
				this.$refs.popupSign.close('center');
				return;
			}
			let that = this;

			if (this.imgaddress) {
				if (this.signType == 'in') {
					if (this.status > 3 || this.isPlanStatus) {
						uni.hideLoading();
						uni.showModal({
							title: '提示',
							content: '签到失败，工单状态已改变',
							showCancel: false,
						});
						return;
					}
				}

				let localInfo = await this.getLocalInfo();
				console.log('localInfo', localInfo);
				let address = await getlocalinfo(
					localInfo.latitude,
					localInfo.longitude
				);
				let signStatus = 1;
				// 计算是否范围内打卡
				let distance = getDistance(
					localInfo.latitude,
					localInfo.longitude,
					this.elevatorDetail.latitude,
					this.elevatorDetail.longitude
				);
				if (distance > this.$config.maxDistance) {
					signStatus = 2;
				}
				// uni.hideLoading()
				// return

				(this.signType == 'in' ? signIn : signOut)(
					this.signType == 'in'
						? {
							userId: that.userinfo.user_id,
							planId: that.planId,
							signImage: that.imgaddress,
							signStatus: signStatus,
							signLongitude: localInfo.longitude,
							signLatitude: localInfo.latitude,
							signAddress: address.result.address,
						}
						: {
							userId: that.userinfo.user_id,
							planId: that.planId,
							signOutImage: that.imgaddress,
							signOutStatus: signStatus,
							signOutLongitude: localInfo.longitude,
							signOutLatitude: localInfo.latitude,
							signOutAddress: address.result.address,
						}
				).then(() => {
					uni.hideLoading();
					uni.showToast({
						title: '提交成功',
						icon: 'none',
						mask: true,
					});

					setTimeout(async () => {
						that.imgaddress = '';
						that.imgUrl = [];
						if (that.signinData.post && that.signType == 'out') {
							console.log('立即执行提交');
							// 立即执行提交
							that.$refs.popupSign.close();
							await that.initData();
						} else {
							that.$refs.popupSign.close();
							that.initData();
						}

						if (this.signType == 'in') {
							this.visibleShowTwo = true;
						}
					}, 700);
				});
			} else {
				uni.hideLoading();
				uni.showToast({
					title: '请拍照',
					icon: 'none',
				});
			}
		},

		// 验证是否有权限

		getPlanRole() {
			console.log(this.planDetail);
			let next = false;
			if (!this.planDetail.users) {
				return next;
			}
			for (let i = 0; i < this.planDetail.users.length; i++) {
				if (this.planDetail.users[i].userId == this.userinfo.user_id) {
					next = true;
					break;
				}
			}
			if (!next) {
				uni.showModal({
					title: '提示',
					content: '你没有权限操作该任务',
					showCancel: false,
				});
			}
			return next;
		},

		// 点击提交完成
		async finish() {
			if (this.getPlanRole() == false) {
				return;
			}

			uni.showLoading({
				title: '加载中',
				mask: true,
			});
			let cantUsers = [];
			if (this.planDetail.users) {
				for (let i = 0; i < this.planDetail.users.length; i++) {
					if (this.planDetail.users[i].userId == this.userinfo.user_id) {
						if (
							this.planDetail.users[i].signUser &&
							this.planDetail.users[i].signUser.isPlanStatus
						) {
							uni.hideLoading();
							this.finishOut(1);

							return;
						}
					} else {
						if (
							this.planDetail.users[i].signUser &&
							this.planDetail.users[i].signUser.isPlanStatus
						) {
							cantUsers.push(this.planDetail.users[i].userName);
						}
					}
				}
			}

			uni.hideLoading();
			if (cantUsers.length > 0) {
				uni.showModal({
					title: '提示',
					content: `同伴${cantUsers.join(
						'、'
					)}未签退，确定择强制完成，同伴自动签退；取消则等同伴签退`,
					success: (res) => {
						if (res.confirm) {
							this.postPlan();
						}
					},
				});
				return;
			}
			this.postPlan();
		},
		// 提交任务
		async postPlan() {
			uni.hideLoading();
			let localInfo = await this.getLocalInfo();
			if (!localInfo.latitude) {
				uni.showModal({
					title: '提示',
					content: '请打开定位，再提交',
					showCancel: false,
				});
				return;
			}
			uni.showModal({
				title: '提示',
				content: '提交任务后将不可修改，是否提交?',
				success: async (res) => {
					if (res.confirm) {
						uni.showLoading({
							title: '提交中',
							mask: true,
						});

						let address = await getlocalinfo(
							localInfo.latitude,
							localInfo.longitude
						);
						// let signStatus = 1;
						// 计算是否范围内打卡

						finishPlan({
							id: this.planId,
							commitAddress: address.result.address,
							commitLongitude: localInfo.longitude,
							commitLatitude: localInfo.latitude,
						})
							.then(() => {
								uni.hideLoading();
								uni.showToast({
									title: '提交成功',
								});
								setTimeout(() => {
									this.initElevtorDetail();
									this.initData();
								}, 500);
							})
							.catch((res) => {
								uni.hideLoading();
								uni.showToast({
									title: res.msg,
									icon: 'none',
								});
								setTimeout(() => {
									this.initData();
								}, 1000);
							});
					}
				},
			});
		},
		changeShowImg(list) {
			this.disposeImgUrl = list;
		},
		// 图片上传
		changeImg(list) {
			console.log('上传图片', list);
			if (list.length > 0) {
				this.imgaddress = list[0];
				this.signImg = list;
			} else {
				this.signImg = list;
			}
		},
		async handleStart() {
			if (this.getPlanRole() == false) {
				return;
			}
			let date = new Date(this.planDetail.planDate.replace(/-/g, '/'));
			let now = new Date();
			now.setHours(0, 0, 0);
			console.log(now.getTime() + 1000 * 60 * 60 * 24 + 2000, date.getTime());
			if (date.getTime() > now.getTime() + 1000 * 60 * 60 * 24 - 2000) {
				uni.showModal({
					title: '提示',
					content: '任务未到可执行时间',
					showCancel: false,
				});
				return true;
			}
			let localInfo = await this.getLocalInfo();
			if (!localInfo.latitude) {
				uni.showModal({
					title: '提示',
					content: '请打开定位，再签到',
					showCancel: false,
				});
				return;
			}
			// 计算是否范围内打卡
			let distance = getDistance(
				localInfo.latitude,
				localInfo.longitude,
				this.elevatorDetail.latitude,
				this.elevatorDetail.longitude
			);
			if (distance > this.$config.maxDistance) {
				uni.showModal({
					title: '提示',
					content: '当前不在项目位置,是否确定按照当前位置继续签到？',
					success: (res) => {
						if (res.confirm) {
							this.imgaddress = '';
							this.signImg = [];
							this.signType = 'in';
							this.$refs.popupSign.open();
						}
					},
				});

				return;
			}
			this.imgaddress = '';
			this.signImg = [];
			this.signType = 'in';
			this.$refs.popupSign.open();
		},
		addRecord() {
			this.$refs.popup.open();
		},
		closeRecord() {
			this.$refs.popup.close();
			this.aa = '0';
		},
		// 关闭提交按钮
		handleSubmit() {
			this.$refs.popup.close();
			this.aa = '1';
			this.getDetail();
		},
		// 拨打电话
		handleCall(phone) {
			if (!phone || phone == 1 || phone == '暂无') {
				return uni.showModal({
					title: '提示',
					content: '当前电梯暂无物业信息',
				});
			}
			uni.makePhoneCall({
				phoneNumber: phone,
			});
		},
		// 查看是否有正在编辑的记录
		editingRecord({ isEdit }) {
			this.isEditFlag = isEdit;
			console.log(this.isEditFlag, '是否有编辑中的数据');
		},
		// 保存提交按钮
		updateRecord({ isEdit, type }) {
			console.log(type, isEdit);
			this.isEditFlag = isEdit;

			this.getDetail();
		},

		// 确认完成
		comfire() {
			this.visibleShow = false;
			this.toAddPart();
		},
		// 多人维修检查状态
		handleDone() {
			console.log('工单完成');
			uni.showToast({
				title: '工单状态已更新,请重新进入页面',
				icon: 'none',
			});
			setTimeout(() => {
				uni.navigateBack({});
			}, 500);
		},
		handleReasonClose() {
			this.$refs.finish.close();
			this.$refs.rescue.clearData();
		},
		// 救援完成填写停梯原因确认框
		handleReasonComfire(res) {
			uni.showLoading({
				title: '提交中...',
			});
			let str;
			if (!this.formData.elevatorId) {
				str = '请补充电梯位置';
				uni.showToast({
					title: str,
					icon: 'none',
				});
				return false;
			}
			this.reportAddress({
				userId: this.userinfo.user_id,
				operation: 5,
				planId: this.planId,
				recordType: 1,
			});
			rescueFinish({ planId: this.planId, ...res, ...this.formData }).then(
				(res) => {
					if (res) {
						uni.hideLoading();
						uni.showToast({
							titel: '提交成功',
							mask: true,
						});
						setTimeout(() => {
							this.$refs.finish.close();
							this.initData();
						}, 700);
					}
				}
			);
		},
		// 项目别名弹窗
		petName(obj) {
			this.popupShow = true;
			this.overflowShow = true;
			this.aliasArr = (obj.relationAlias || []).map((item) => item.alias);
		},
		closedMask() {
			this.overflowShow = false;
			this.popupShow = false;
		},
		// 判断救援工单是否有关联的维修单
		async getRescueRepairOrder() {
			try {
				const res = await getRescueRepairOrder({
					id: this.planId,
				});
				if (res.code === 200) {
					this.disabledRepairBtn = res.data;
				}
				console.log('判断救援工单是否有关联的维修单', res);
			} catch (e) {
				console.error('获取救援工单是否有关联的维修单失败:', e);
			}
		},
	},
};
</script>
<style lang="scss">
page {
	height: 100%;
	background-color: #f3f6f8;
	font-size: 28rpx;
}
</style>

<style lang="scss" scoped>
.mapBox {
	width: 100%;
	height: 700rpx;

	cover-image {
		border-radius: 50%;
		width: 64rpx;
		height: 64rpx;
	}
}

.customCallout {
	display: flex;
	width: 350rpx;
	background: #fff;
	box-sizing: border-box;
	background-color: #fff;
	border-radius: 4rpx;
	padding: 12rpx 16rpx;

	.content_left {
		width: 64rpx;
		padding-right: 12rpx;
	}

	.content_right {
		font-size: 24rpx;
		color: #333;

		.content_right_main {
			display: flex;
			color: #333;

			.realName {
				font-weight: bold;
			}

			.phone {
				color: #666;
			}

			.position {
				color: #e02020;
				display: flex;
			}

			.way {
				font-weight: bold;
			}

			.arried {
				color: #fa6400;
				display: flex;
				align-items: center;
			}

			.time {
				color: #999;
			}
		}

		cover-view {
			margin-bottom: 4rpx;
		}

		cover-image {
			width: 32rpx;
			height: 32rpx;
		}
	}
}

.callPhone {
	display: flex;
	align-items: center;
	justify-content: flex-start;

	image {
		width: 32rpx;
		height: 32rpx;
	}

	text {
		color: #0091ff;
		font-size: 28rpx;
	}
}

// 检修记录
.repair_box {
	background-color: #f3f6f8;
	position: relative;

	// z-index: 100;
	.content_item {
		margin-bottom: 20rpx;
		padding: 28rpx 20rpx;
		border-radius: 8rpx;
		background: #ffffff;

		.title {
			font-size: 32rpx;
			color: #333;
			font-weight: 500;
			// padding-bottom: 22rpx;
		}
	}
}

// 关联任务
.infocard {
	border-radius: 8rpx;
	background-color: #fff;
	margin: 0rpx auto;
	margin-bottom: 20rpx;
	padding: 20rpx;
	padding-bottom: 0;
	line-height: 50rpx;
	position: relative;
	color: #333333;
	letter-spacing: 1rpx;

	.title {
		font-size: 32rpx;
		font-weight: bold;
		text-align: left;
		letter-spacing: 1rpx;
		display: flex;
		align-items: center;
		justify-content: space-between;
	}

	.border_item {
		border-bottom: 1px solid #eee;
	}

	.padding {
		padding: 20rpx 0;
	}

	.ele-name {
		font-size: 28rpx;
		display: flex;
		color: #000;
		justify-content: flex-start;
		align-items: center;

		image {
			width: 32rpx;
			height: 32rpx;
		}

		text {
			color: #0091ff;
			font-weight: normal;
			font-size: 22rpx;
			padding: 2rpx 5rpx;
			background: #dcf0ff;
			border-radius: 4rpx;
			margin-left: 10rpx;
			line-height: 30rpx;
			white-space: nowrap;
			// display: inline-block;
		}

		.deep {
			color: #fff;
			background: #0091ff;
		}
	}

	.main_card_item {
		display: flex;
		margin-top: 16rpx;

		.descBox {
			padding-bottom: 20rpx;

			.status_content {
				display: flex;
				flex-wrap: wrap;
				flex: 1;
			}

			.statusFault {
				padding: 0rpx 12rpx;
				border-radius: 8rpx;
				font-size: 26rpx;
				margin-bottom: 20rpx;
				margin-left: 4rpx;
			}

			.stop {
				border: 2rpx solid #e02020;
				color: #e02020;
				margin-right: 12rpx;
			}

			.normal {
				border: 2rpx solid #0091ff;
				color: #0091ff;
				margin-right: 12rpx;
			}

			image {
				width: 32rpx;
				height: 32rpx;
			}

			.title {
				font-weight: normal !important;
				font-size: 28rpx !important;
				color: #999 !important;
			}

			.content {
				font-size: 28rpx !important;
				color: #333;
			}
		}

		.label {
			margin-right: 24rpx;
			color: #999999;
			font-size: 28rpx;
			width: 140rpx;
		}

		.desc {
			display: flex;
			flex: 1;
			flex-wrap: wrap;
			color: #333;
			font-size: 28rpx;

			.tag {
				margin-right: 12rpx;
				border: 2rpx solid transparent;
				padding: 0rpx 12rpx;
				border-radius: 8rpx;
				font-size: 26rpx;
			}

			.stop {
				border: 2rpx solid #e02020;
				color: #e02020;
			}

			.normal {
				border: 2rpx solid #0091ff;
				color: #0091ff;
			}
		}

		.phone {
			color: #0091ff;

			image {
				width: 32rpx;
				height: 32rpx;
				margin-top: 6rpx;
			}
		}
	}

	.showMore {
		display: flex;
		align-items: center;
		justify-content: center;
		font-size: 24rpx;
		color: #999999;
		padding-top: 20rpx;

		.text_more {
			display: inline-block;
			margin-left: 12rpx;
			width: 12rpx;
			height: 12rpx;
			border-left: 2rpx #999 solid;
			border-bottom: 2rpx #999 solid;
			transform: rotate(-45deg);
			margin-bottom: 8rpx;
		}
	}

	.tag {
		margin-right: 12rpx;
		border-radius: 8rpx;
		padding: 0 24rpx;
		margin-bottom: 4rpx;
	}

	.stop {
		border: 2rpx solid #e02020;
		color: #e02020;
	}

	.normal {
		border: 2rpx solid #0091ff;
		color: #0091ff;
	}
}

// 电梯位置下拉框 弹出层
.popupWrapper {
	width: 100%;
	height: 100%;
	background-color: $uni-bg-color-mask;
	position: fixed;
	top: 0;
	left: 0;
	z-index: 300;
	display: flex;
	justify-content: center;
	flex-wrap: wrap;
	align-items: flex-end;
	animation: fadeInOut 0.3s ease;
	box-shadow: 0rpx -4rpx 12rpx 0rpx rgba(0, 0, 0, 0.12);

	.calendarEdit {
		width: 100%;
		background-color: #fff;
		height: 890rpx;
		border-radius: 8rpx 8rpx 0rpx 0rpx;
		position: relative;

		.edit_bor {
			width: 100%;
			padding: 20rpx 0;

			.down-btn {
				width: 64rpx;
				height: 10rpx;
				background: #d8d8d8;
				border-radius: 6rpx;
				margin: 0 auto;
			}
		}

		.edit_content {
			scroll-view {
				height: 680rpx;
			}

			.executive_tit {
				width: 680rpx;
				margin: 0 auto;
				margin-bottom: 20rpx;
				font-size: 32rpx;
				font-weight: bold;
				color: #333333;
			}

			.executive {
				width: 680rpx;
				margin: 0 auto;
				display: flex;
				flex-direction: column;
				margin-bottom: 20rpx;
				padding-bottom: 20rpx;

				.executive_gr {
					margin-bottom: 20rpx;
				}

				.executive_user {
					display: flex;
					align-items: center;
					justify-content: space-between;
					border-bottom: 1px solid #eee;
					padding: 30rpx 0;

					.signStatus {
						color: #fa6400;
						text-align: center;
						background-color: #ffefe3;
						font-size: 24rpx;
						font-weight: 400;
						margin: 0 10rpx;
						padding: 0 10rpx;
					}
				}

				.last {
					border: none;
				}
			}
		}
	}

	.sure_box {
		position: absolute;
		bottom: 0;
		left: 0;
		padding: 20rpx;
		width: 100%;
		box-sizing: border-box;

		.text {
			background: #efefef;
			border-radius: 4px;
			text-align: center;
			width: 335px;
			height: 35px;
			line-height: 35px;
			margin: auto;
			font-size: 28rpx;
			color: #cccccc;
		}
	}
}

// 项目地址卡片
.addressBox {
	width: 710rpx;
	margin: 0 auto;
	background: #fff;
	border-radius: 8rpx;
	font-size: 24rpx;
	padding: 20rpx 0 16rpx 16rpx;
	font-size: 24rpx;
	color: #999;
	box-sizing: border-box;
	margin-bottom: 20rpx;
	position: relative;
	z-index: 110;

	.top {
		display: flex;

		.name {
			display: flex;
			// padding-left: 14rpx;
			font-weight: 600;
			color: #333;
			align-items: center;
		}

		image {
			width: 32rpx;
			height: 32rpx;
			margin-right: 10rpx;
		}
	}

	.buildAddress {
		padding: 0 20rpx 0 32rpx;
		margin-left: 10rpx;
	}
}

.rePair_detail {
	position: relative;

	.nav {
		position: sticky;
		top: 0;
		z-index: 112;
	}

	.bg {
		width: 376rpx;
		height: 366rpx;
		position: absolute;
		top: 0;
		right: 0;
	}

	.header {
		// height: 160rpx;
		padding-left: 40rpx;
		padding-right: 32rpx;
		margin-bottom: 50rpx;
		padding-top: 28rpx;
		// margin-top: 20rpx;
		// background: linear-gradient(0deg, rgba(0, 145, 255, 0) 0%, rgba(0, 145, 255, 0.15) 100%);
	}

	.progressBar_elevator {
		width: 710rpx;
		margin: 0 auto;
		background: #fff;
		border-radius: 8rpx;
		margin-bottom: 20rpx;
		display: flex;
		height: 84rpx;
		line-height: 84rpx;
		z-index: 300;

		view:nth-of-type(1) {
			flex: 1;
			font-size: 32rpx;
			font-weight: 500;
			color: #333333;
			margin-left: 20rpx;
		}

		view:nth-of-type(2) {
			flex: 0 0 200rpx;
			text-align: right;
			font-size: 26rpx;
			color: #0091ff;
			border-radius: 8rpx;
			padding: 0rpx 30rpx;
			vertical-align: middle;

			text {
				margin-right: 8rpx;
			}

			image {
				width: 32rpx;
				height: 32rpx;
				vertical-align: middle;
			}
		}
	}

	.content_box {
		padding: 0 20rpx;
		background-color: #f3f6f8;
		padding-bottom: 150rpx;
		position: relative;

		// z-index: 100;
		.content_item {
			margin-bottom: 20rpx;
			padding: 28rpx 20rpx;
			border-radius: 8rpx;
			background: #ffffff;

			.title {
				font-size: 32rpx;
				color: #333;
				font-weight: bold;
				padding-bottom: 22rpx;
			}

			.des {
				margin-bottom: 20rpx;

				:nth-child(2) {
					margin-bottom: 16rpx;
					color: #333;
					font-size: 28rpx;
				}
			}

			.faultImg {
				display: flex;
				flex-wrap: wrap;

				// margin: 20rpx 0;
				image {
					width: 120rpx;
					height: 120rpx;
					margin-right: 18rpx;
				}
			}

			.falutItem {
				display: flex;
				align-items: center;
				margin-top: 10rpx;

				.label {
					color: #999999;
					font-size: 28rpx;
					width: 160rpx;
				}

				.trapDesc {
					flex: 1;
				}
			}
		}

		.record_item {
			margin-bottom: 20rpx;
			padding: 28rpx 0rpx;
			border-radius: 8rpx;
			background: #ffffff;
		}

		.faultReasonContent {
			//   padding: 0 20rpx;

			.faultReasonItem {
				display: flex;
				align-items: baseline;
				margin-bottom: 20rpx;

				.label {
					width: 160rpx;
					color: #999;
				}

				.falutLabel {
					flex: 1;

					view {
						display: inline-block;
						padding: 4rpx 24rpx;
						font-size: 26rpx;
						text-align: center;
						border: 2rpx solid #e02020;
						border-radius: 8rpx;
						color: #e02020;
						margin-top: 4rpx;
						margin-right: 10rpx;
					}
				}

				.falutDesc {
					flex: 1;
				}
			}

			.imgList {
				display: flex;
				align-items: center;
				flex-wrap: wrap;

				image {
					width: 112rpx;
					height: 112rpx
				}

				view {
					margin-right: 24rpx;
					margin-bottom: 24rpx;
				}
			}

			.msg {
				font-size: 24rpx;
				color: #999999;
				margin-top: 16rpx;

				view {
					height: 34rpx;
				}
			}
		}

		.progressBar {
			display: flex;
			justify-content: center;
			margin-bottom: 20rpx;

			.progressBar_content {
				width: 710rpx;
				// height: 284rpx;
				background: #ffffff;
				border-radius: 8rpx;
				padding: 20rpx;
				box-sizing: border-box;

				.progressBar_item {
					margin-bottom: 32rpx;
					font-size: 32rpx;
					font-weight: 700;
				}
			}

			.userBox {
				padding: 20rpx 0;
				border-bottom: 2rpx solid #e9e9e9;
			}

			.mapMain {
				margin-top: 20rpx;
				height: 600rpx;
				overflow: hidden;
			}
		}
	}

	.bottom {
		position: fixed;
		bottom: 0;
		left: 0;
		z-index: 200;
		background-color: #fff;

		/* #ifndef H5 */
		height: 100rpx;
		/* #endif */

		width: 100%;
		display: flex;
		padding-right: 18rpx;
		box-sizing: border-box;

		/* #ifdef H5 */
		padding-top: 14rpx;
		padding-bottom: constant(safe-area-inset-bottom);
		padding-bottom: env(safe-area-inset-bottom);
		/* #endif */

		view {
			// height: 100%;
			display: flex;
			align-items: center;
		}

		.left {
			width: 200rpx;
			font-size: 20rpx;

			.left_item {
				display: flex;
				flex-direction: column;
				flex: 1;

				view {
					width: 100%;
					display: flex;
					flex: 1;
					justify-content: center;
					// background: red;
					color: #666;
				}

				image {
					width: 48rpx;
					height: 48rpx;
				}
			}
		}

		.more {
			width: 270rpx;
			padding-right: 10rpx;

		}

		.right {

			flex: 1;

			.start {
				width: 524rpx;
				height: 70rpx;
				background: #0091ff;
				border-radius: 8rpx;
				color: #fff;
			}

			.finish {
				background-color: #ccc;
			}

			.repariing {
				width: 100%;
				justify-content: space-between;

				view {
					display: flex;
					flex: 1;
					justify-content: center;
					height: 70rpx;
					border-radius: 8rpx;
				}

				.add {
					background: #0091ff;
					margin-right: 14rpx;
					color: #fff;
					font-size: 26rpx;
					display: flex;
					align-items: center;
					justify-content: center;

					image {
						width: 32rpx;
						height: 32rpx;
						margin-right: 8rpx;
					}
				}

				.addRed {
					position: relative;

					text {
						position: absolute;
						top: -10rpx;
						right: 0;
						width: 30rpx;
						height: 30rpx;
						background: red;
						border-radius: 15rpx;
						font-size: 20rpx;
						text-align: center;
					}
				}

				.videocall {
					background: #dcf0ff;
					color: #0091ff;
				}

				.finish {
					background: #efefef;
					color: #cccccc;
					font-size: 26rpx;
				}
			}
		}
	}

	.change_elevator {
		display: flex;
		flex-direction: row;
		justify-content: center;

		.actElevator {
			// background-color: #0091ff;
			font-size: 24rpx !important;
			color: #0091ff !important;
			border: 2rpx #0091ff solid !important;
		}

		view:nth-of-type(1) {
			// background-color: #0091ff;
			color: #666;
			height: 72rpx;
			width: 176rpx;
			line-height: 72rpx;
			text-align: center;
			border-radius: 8rpx;
			border: 2rpx #ccc solid;
			font-size: 24rpx;
			margin-right: 60rpx;
		}

		view:nth-of-type(2) {
			font-size: 24rpx;
			color: #666;
			height: 72rpx;
			width: 176rpx;
			line-height: 72rpx;
			text-align: center;
			border-radius: 8rpx;
			border: 2rpx #ccc solid;
		}
	}

	.comfirBox {
		text-align: center;

		.tips {
			color: red;
			padding-top: 10rpx;
			font-size: 26rpx;
		}
	}

	.more-btns {
		position: fixed;
		left: 138rpx;
		bottom: 115rpx;
		width: 70px;
		border-radius: 4px;
		opacity: 1;
		z-index: 500;
		display: flex;
		flex-direction: column;
		padding: 0px 10px;
		background: #FFFFFF;
		box-shadow: 0px 0px 6px 0px rgba(0, 0, 0, 0.1181);

		&-item {
			width: 100%;
			text-align: center;
			color: #3D3D3D;
			font-size: 28rpx;
			border-bottom: 1px solid #EEEEEE;
			padding: 20rpx 0;
		}

		&-item:last-child {
			border: none;
		}
	}
}
</style>
